<template>
    <h2>显示门店列表</h2>
    门店名称：
    <input type="text" v-model="name" />
    <input type="button" value="查询" @click="Show"/> 
    <table border="1" class="table table-info">
        <thead>
            <tr>
                <td></td>
                <td>门店名称</td>
                <td>分店名称</td>
                <td>门店地址</td>
                <td>门店电话</td>
                <td>门店状态</td>
                <td>门店介绍</td>
                <td>入住须知</td>
                <td>交通信息</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info.Data_Info">
                <td>{{item.Shop_Name}}</td>
                <td>{{item.Shop_BranchName}}</td>
                <td>{{item.Shop_Address}}</td>
                <td>{{item.Shop_Phone}}</td>
                <td>{{item.Phop_State}}</td>
                <td>{{item.Shop_Info}}</td>
                <td>{{item.Shop_Notice}}</td>
                <td>{{item.Shop_Traffic}}</td>
                <td>
                    <input type="button" value="删除" @click="Shan(item.Shop_Id)"/>
                    <input type="button" value="修改" @click="Xiu(item.Shop_Id)"/>
                </td>
            </tr>
        </tbody>
    </table>

    总共有{{info.TotalCount}}条数据
    总共有{{info.PageCount}}页
    当前为{{pageInfo.pageIndex}}页

    <a href="#" style="margin-right:20px;" @click="Fan('F')">首页</a>
    <a href="#" style="margin-right:20px;" @click="Fan('L')">上一页</a>
    <a href="#" style="margin-right:20px;" @click="Fan('N')">下一页</a>
    <a href="#" style="margin-right:20px;" @click="Fan('E')">尾页</a>

    <select v-model="newPage" @change="GaiSize">
        <option :value="1">1/页</option>
        <option :value="2">2/页</option>
        <option :value="3">3/页</option>
        <option :value="4">4/页</option>
    </select>

    <input type="text" v-model="newZhuan" />
    <input type="button" value="跳转" @click="Zhuan"/>

</template>


<script setup lang="ts">

    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRoute,useRouter} from 'vue-router';

    const router=useRouter();
    const route=useRoute();

    const newPage=ref(2);
    const newZhuan=ref(2);

    

    onMounted(()=>{
        Show();
    })

    const pageInfo=ref({
        pageIndex:1,
        pageSize:2
    });

    const info=ref({
        TotalCount:0,
        PageCount:0,
        Data_Info:[{
            Shop_Id:0,
            Shop_Name: "",
            Shop_BranchName: "",
            Shop_Address: "",
            Shop_Phone: "",
            Phop_State: true,
            Shop_Info: "",
            Shop_Notice: "",
            Shop_Traffic: ""
        }]
    });

    const name=ref("");

    const Show=()=>{
        
        axios.get("https://localhost:7153/api/Member/GetShopByPage/GetShopByPage",{
            params:{
                pageIndex:pageInfo.value.pageIndex,
                pageSize:pageInfo.value.pageSize,
                name:name.value
            }
        })
        .then(res=>{
            console.log(res.data);
            info.value=res.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    //删除
    const Shan=(id:number)=>{
        if(confirm("确定要删除吗？")){
        axios.delete("https://localhost:7153/api/Member/DelShop/DelShop",{
            params:{
                id:id
            }
        })
        .then(res=>{
            if(res.data>0){
                 alert('删除成功');
            }
            else{
                 alert('删除失败');
            }
        })
        .catch(err=>{
            console.log(err);
        })
        }
    }

    //修改跳转
    const Xiu=(id:number)=>{
        router.push({
            name:"UpdateShop",
            params:{
                id:id
            }
        })
    }

    const Fan=(choose:string)=>{
        switch(choose){
            case 'F':
                pageInfo.value.pageIndex=1;
            break;
             case 'L':
                pageInfo.value.pageIndex--;
            break;
             case 'N':
                pageInfo.value.pageIndex++;
            break;
             case 'E':
                pageInfo.value.pageIndex=info.value.PageCount;
            break;
        }
        Show();
    }

    const GaiSize=()=>{
        pageInfo.value.pageSize=newPage.value;
        Show();
    }

    const Zhuan=()=>{
        pageInfo.value.pageIndex=newZhuan.value;
        Show();
    }


</script>
